<template>
  <el-form
    label-position="top"
    label-width="80px"
    :model="formdata"
    style="padding: 0px 20px 0px 20px"
  >
    <el-form-item label="尺寸(px)">
      <el-col class="line" :span="2" style="color: #606266">宽</el-col>
      <el-col :span="10">
        <el-input-number
          v-model="formdata.w"
          controls-position="right"
          style="width: 100px"
        />
      </el-col>
      <el-col class="line" :span="2" style="color: #606266">高</el-col>
      <el-col :span="10">
        <el-input-number
          v-model="formdata.h"
          controls-position="right"
          style="width: 100px"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="位置(px)">
      <el-col class="line" :span="2" style="color: #606266">x</el-col>
      <el-col :span="10">
        <el-input-number
          v-model="formdata.x"
          controls-position="right"
          style="width: 100px"
        />
      </el-col>
      <el-col class="line" :span="2" style="color: #606266">y</el-col>
      <el-col :span="10">
        <el-input-number
          v-model="formdata.y"
          controls-position="right"
          style="width: 100px"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="名称">
      <el-input v-model="formdata.name" />
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="formdata.rm" />
    </el-form-item>
    <el-form-item label="内容">
      <el-input
        v-model="formdata.v"
        type="textarea"
        :rows="4"
        @blur="changeContent"
      />
    </el-form-item>
    <el-form-item v-if="formdata.t == 'text'" label="字体">
      <el-select v-model="formdata.fn" placeholder="请选择" style="width: 100%">
        <el-option
          v-for="item in fonts"
          :key="item.value"
          :style="`font-family:${item.value}`"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="formdata.t == 'text'" label="字号">
      <el-input-number v-model="formdata.s" controls-position="right" />
    </el-form-item>
    <el-form-item v-if="formdata.t == 'text'" label="颜色">
      <el-color-picker v-model="formdata.c" />
    </el-form-item>
    <el-form-item v-if="formdata.t == 'image'" label="图片">
      <el-upload
        class="upload-demo"
        :headers="myHeaders"
        :action="apiUrl + '/index/upload'"
        :on-success="handleSuccess"
        :show-file-list="false"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-form-item>
    <!-- 暂时不支持颜色修改 -->
    <!--<el-form-item label="颜色" v-if="formdata.t == 'qrcode'">
      <el-color-picker
        v-model="formdata.c"
        @change="changeColor"
      ></el-color-picker>
    </el-form-item>
    <el-form-item label="背景色" v-if="formdata.t == 'qrcode'">
      <el-color-picker
        v-model="formdata.bgc"
        @change="changeColor"
      ></el-color-picker>
    </el-form-item>-->
  </el-form>
</template>

<script>
import '@/assets/fonts/ali-font.css'

export default {
  name: 'Widget',
  props: ['formdata', 'index'],
  data () {
    return {
      apiUrl: '',
      myHeaders: { Authorization: 'Bearer ' },
      fonts: [
        {
          label: '阿里巴巴普惠体-Light',
          value: 'ali-light'
        },
        {
          label: '阿里巴巴普惠体-Regular',
          value: 'ali-Regular'
        },
        {
          label: '阿里巴巴普惠体-Medium',
          value: 'ali-Medium'
        },
        {
          label: '阿里巴巴普惠体-Bold',
          value: 'ali-Bold'
        },
        {
          label: '阿里巴巴普惠体-Heavy',
          value: 'ali-Heavy'
        }
      ]
    }
  },
  created () {
    this.apiUrl = process.env.BASE_API
  },
  methods: {
    changeColor () {
      this.$emit('changeColor')
    },
    // 上传成功
    handleSuccess (res, file) {
      this.formdata.v = res.data.url
    },
    changeContent () {
      if (this.formdata.t === 'qrcode') {
        this.$emit('changeQrcode', {
          index: this.index,
          item: this.formdata
        })
      }
    }
  }
}
</script>

<style scoped></style>
